<template>
  <div>
    <van-notice-bar
      left-icon="volume-o"
      text="本程序列举出各种电脑硬件方便大家自己模拟装机。"
    />
    <div>
      <van-search
        :value="value"
        placeholder="请输入搜索关键词"
        use-action-slot
        @change="onChange"
        @search="onSearch"
      >
        <view slot="action" bind:tap="onClick">搜索</view>
      </van-search>
    </div>
    <van-grid column-num="4">
      <div v-for="i in category" :key="i.id">
        <van-grid-item
          :icon="i.icon"
          :text="i.desc"
          :key="i"
          @click="checkInfo"
        />
      </div>
    </van-grid>
    <div style="margin-top: 30px">
      <van-tabs animated>
        <div v-for="tabInfo in tabInfos" :key="tabInfo.id">
          <van-tab :title="tabInfo.title">{{ tabInfo.content }}</van-tab>
        </div>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import card from "@/components/card";

export default {
  data() {
    return {
      motto: "Hello miniprograme",
      tabInfos: [
        {
          id: 1,
          title: "性价比推荐",
          content: "",
        },
        {
          id: 2,
          title: "游戏娱乐",
          content: "",
        },
        {
          id: 3,
          title: "家用办公",
          content: "",
        },
        {
          id: 4,
          title: "发烧玩家",
          content: "",
        },
      ],
      category: [
        {
          id: 1,
          desc: "CPU",
          icon: "http://106.14.223.232:9000/disk2/cpu.png",
          link: "",
        },
        {
          id: 2,
          desc: "主板",
          icon: "",
          link: "",
        },
        {
          id: 3,
          desc: "内存",
          icon: "",
          link: "",
        },
        {
          id: 4,
          desc: "硬盘",
          icon: "",
          link: "",
        },
        {
          id: 5,
          desc: "显卡",
          icon: "",
          link: "",
        },
        {
          id: 6,
          desc: "机箱",
          icon: "",
          link: "",
        },
        {
          id: 7,
          desc: "电源",
          icon: "",
          link: "",
        },
        {
          id: 8,
          desc: "散热",
          icon: "",
          link: "",
        },
      ],
      userInfo: {
        nickName: "111",
        avatarUrl: "http://mpvue.com/assets/logo.png",
      },
    };
  },

  components: {
    card,
  },

  methods: {
    bindViewTap() {
      const url = "../logs/main";
      if (mpvuePlatform === "wx") {
        mpvue.switchTab({ url });
      } else {
        mpvue.navigateTo({ url });
      }
    },
    checkInfo(ev) {
      console.log("checkInfo:", ev);
      // console.log(ev.)
    },
  },

  created() {
    // let app = getApp()
  },
};
</script>

<style scoped>
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 150px;
}

.form-control {
  display: block;
  padding: 0 12px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
}
.all {
  width: 7.5rem;
  height: 1rem;
  background-color: blue;
}
.all:after {
  display: block;
  content: "";
  clear: both;
}
.left {
  float: left;
  width: 3rem;
  height: 1rem;
  background-color: red;
}

.right {
  float: left;
  width: 4.5rem;
  height: 1rem;
  background-color: green;
}
</style>
